/* eslint-disable operator-linebreak */
/* eslint-disable no-confusing-arrow */
import React from 'react';
import { GeoJSON } from 'react-leaflet';
import { isEmpty, isString } from 'lodash';
import setting from './setting';
import { getValueDefault } from '../commonSetting';

class LGeoHeatLayer extends React.PureComponent {
  constructor(props) {
    super(props);
    const valueDefault = getValueDefault(props);
    if (valueDefault) {
      this.setDataPool(valueDefault);
    }
  }

  // 数据格式化为geoJson
  get geoData() {
    const { data } = this.props;
    if (isEmpty(data)) return [];
    return {
      type: 'FeatureCollection',
      features: data
        .filter(
          (item) =>
            Array.isArray(item.coords) &&
            Array.isArray(item.coords[0]) &&
            Array.isArray(item.coords[0][0]) &&
            (!item.type || isString(item.type))
        )
        .map((item) => ({
          type: 'Feature',
          properties: {
            tooltip: item.info || '',
            value: Number(item.value) || 0,
          },
          geometry: {
            type: item.type || 'Polygon',
            coordinates: item.coords,
          },
        })),
      features1: [],
    };
  }

  // 提示框设置
  get tooltip() {
    const {
      config: {
        tooltip: {
          show,
          borderColor,
          borderWidth,
          font,
          background: { type: backgroundType, backgroundColor, imageUrl },
        },
      },
    } = this.props;
    return {
      show,
      borderColor,
      borderWidth,
      font,
      backgroundType,
      backgroundColor,
      imageUrl,
    };
  }

  // 获得区域颜色
  getSpotColor = (value) => {
    const {
      config: {
        base: { colors },
      },
    } = this.props;

    const set = colors.reduce(
      (pre, item) =>
        item.start < value && value <= item.end ? item.color : pre,
      null
    );
    return set || colors[0].color;
  };

  // 获得区域样式
  getGeoStyle = (feature) => {
    const {
      config: {
        base: { color, weight },
      },
    } = this.props;

    return {
      color,
      weight,
      opacity: 1,
      fillOpacity: 1,
      fillColor: this.getSpotColor(feature.properties.value),
    };
  };

  // 获得提示框内容
  getPopupContent = (info) => {
    const {
      borderColor,
      borderWidth,
      font,
      backgroundType,
      backgroundColor,
      imageUrl,
    } = this.tooltip;
    const myBackground =
      backgroundType === 'color'
        ? `background-color: ${backgroundColor}`
        : `background-image: url(${imageUrl})`;

    const infoArray = `${info}`.split(';');
    const text = infoArray.join('<br />');

    return `<div class="map-marker-content" style="${myBackground};
      border: ${borderWidth}px solid ${borderColor};
      color: ${font.color};
      font-size: ${font.fontSize}px;
      font-family: ${font.fontFamily};
      font-weight: ${font.fontWeight};">
     ${text}
    </div>`;
  };

  // 更新store中的dataPoll
  setDataPool(dataPoll) {
    // eslint-disable-next-line
    if (!this.props.events) return;
    const {
      bigScreen: { setDataPool },
      editable,
      events: { click },
      path,
    } = this.props;
    setDataPool(click, dataPoll, path, editable);
  }

  onEachFeature = (feature, layer) => {
    // 交互功能
    const { events } = this.props;

    if (events) {
      layer.on('click', () => {
        if (events && events.click.action.active) {
          this.setDataPool({ info: feature.properties.tooltip });
        }
      });
    }

    const { show } = this.tooltip;
    if (show === 'hide') return;

    const popupContent = this.getPopupContent(feature.properties.tooltip);

    if (show === 'click') {
      layer.bindPopup(popupContent, {
        closeButton: false,
        className: 'marker-popup',
      });
      return;
    }
    layer.bindTooltip(popupContent, {
      permanent: show === 'always',
      className: 'marker-tooltip',
    });
  };

  render() {
    const { data } = this.props;
    if (isEmpty(data)) return null;

    return (
      <GeoJSON
        key={Math.floor(Math.random() * 100)}
        data={this.geoData}
        style={(feature) => this.getGeoStyle(feature)}
        onEachFeature={this.onEachFeature}
      />
    );
  }
}

LGeoHeatLayer.setting = setting;

export default LGeoHeatLayer;
